<script setup lang="ts">
import generalImage from './general.png'
import seriousImage from './serious.png'
import urgentImage from './urgent.png'

const notificationStore = useNotificationStore()
const {
  generalNumObj,
  generalTotal,
  seriousNumObj,
  seriousTotal,
  urgentNumObj,
  urgentTotal,
} = storeToRefs(notificationStore)
</script>

<template>
  <div class="h-140px flex flex-nowrap items-center gap-3 overflow-x-auto">
    <div class="h-full min-w-275px flex-1 rounded bg-cover bg-no-repeat" :style="{ backgroundImage: `url(${urgentImage})` }">
      <div class="h-full flex items-center">
        <div class="flex flex-col pr-8">
          <div>
            <strong class="text-lg">{{ urgentTotal }}</strong>
            <span class="fs-18 ml-2">次</span>
          </div>
          <div class="fs-20 mt-4">
            紧急
          </div>
        </div>
        <ul class="fs-14 list-none pl-0 line-height-normal">
          <li>未处理：{{ urgentNumObj.jjWclNum }}</li>
          <li>处理中：{{ urgentNumObj.jjClzNum }}</li>
          <li>待审核：{{ urgentNumObj.jjDshNum }}</li>
          <li>已处理：{{ urgentNumObj.jjYclNum }}</li>
          <li>已忽略：{{ urgentNumObj.jjYhlNum }}</li>
        </ul>
      </div>
    </div>
    <div class="h-full min-w-275px flex-1 rounded bg-cover bg-no-repeat" :style="{ backgroundImage: `url(${seriousImage})` }">
      <div class="h-full flex items-center">
        <div class="flex flex-col pr-8">
          <div>
            <strong class="text-lg">{{ seriousTotal }}</strong>
            <span class="fs-18 ml-2">次</span>
          </div>
          <div class="fs-20 mt-4">
            严重
          </div>
        </div>
        <ul class="fs-14 list-none pl-0 line-height-normal">
          <li>未处理：{{ seriousNumObj.yzWclNum }}</li>
          <li>处理中：{{ seriousNumObj.yzClzNum }}</li>
          <li>待审核：{{ seriousNumObj.yzDshNum }}</li>
          <li>已处理：{{ seriousNumObj.yzYclNum }}</li>
          <li>已忽略：{{ seriousNumObj.yzYhlNum }}</li>
        </ul>
      </div>
    </div>
    <div class="h-full min-w-275px flex-1 rounded bg-cover bg-no-repeat" :style="{ backgroundImage: `url(${generalImage})` }">
      <div class="h-full flex items-center">
        <div class="flex flex-col pr-8">
          <div>
            <strong class="text-lg">{{ generalTotal }}</strong>
            <span class="fs-18 ml-2">次</span>
          </div>
          <div class="fs-20 mt-4">
            一般
          </div>
        </div>
        <ul class="fs-14 list-none pl-0 line-height-normal">
          <li>未处理：{{ generalNumObj.ybWclNum }}</li>
          <li>处理中：{{ generalNumObj.ybClzNum }}</li>
          <li>待审核：{{ generalNumObj.ybDshNum }}</li>
          <li>已处理：{{ generalNumObj.ybYclNum }}</li>
          <li>已忽略：{{ generalNumObj.ybYhlNum }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
